import React, {Component} from 'react'
import {TextInput, View, Image, StyleSheet, Text, TouchableOpacity} from 'react-native'
import {orangeColor} from '../comment/comment_config'
import {StackNavigator} from 'react-navigation'

import ImageAndTextInput from '../comment/ImageAndTextInput'
import MainPage from '../main_page'

export default class LoginComponent extends Component {

    static navigationOptions = {
        title: 'login',//设置标题内容
    };

    render() {
        return (
            <LoginView></LoginView>
        )
    }
}

const App = StackNavigator({
    Main:{screen:MainPage},
    Login:{screen:LoginComponent},
})

class LoginView extends Component {

    constructor(props){
        super(props)
        this.state={

        }
    }

    onCancelBtnClick = () => {

    }

    onLoginBtnPress = () => {
        // const { navigate } = this.props.navigation;
        this.props.navigation.navigate('Main',{name:'login_page'})
    }

    // params = {imagePath: require('../imgs/account_bright_icon.png'), textText: '我丢你老母'}

    render() {

        return (
            <View style={styles.container}>

                <Image source={require('../imgs/cancle_x_icon.png')} style={styles.loginXBtnStyle}/>
                <Image source={require('../imgs/logo_des.png')} style={styles.loginLogoStyle}
                       onPress={this.onCancelBtnClick}/>

                <View style={styles.textContainerStyle}>
                    <Image source={require('../imgs/account_bright_icon.png')} style={{width: 13, height: 16}}/>
                    <TextInput underlineColorAndroid='transparent' style={styles.loginTextStyle}></TextInput>
                </View>

                {/*<ImageAndTextInput imagePath={this.params.imagePath} textText={this.params.textText}/>*/}

                <View style={styles.textContainerStyle}>
                    <Image source={require('../imgs/lock_bright_icon.png')} style={{width: 13, height: 16}}/>
                    <TextInput underlineColorAndroid='transparent' style={styles.loginTextStyle}></TextInput>
                    <TouchableOpacity activeOpacity={0.6}>
                        <Text style={{color: orangeColor, fontSize:14}}>忘记密码</Text>
                    </TouchableOpacity>
                </View>

                <TouchableOpacity style={styles.loginBtnStyle} activeOpacity={0.6} onPress={this.onLoginBtnPress}>
                    <Text style={{color: '#ffffff'}}>登录</Text>
                </TouchableOpacity>

                <View style={{flex:1, flexDirection:'row', alignItems:'flex-end',justifyContent:'center'}}>
                    <Text style={{fontSize:16, color:orangeColor, marginBottom:15}}>立即注册</Text>
                </View>
            </View>
        )
    }
}

var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');

const styles = StyleSheet.create(
    {
        container: {
            flex: 1,
        },

        loginBtnStyle: {
            alignItems: 'center',
            justifyContent: 'center',
            width: width - 70,
            height: 40,
            marginLeft: 35,
            marginTop: 45,
            borderRadius: 40,
            backgroundColor: orangeColor
        },

        loginXBtnStyle: {
            width: 20,
            height: 20,
            marginTop: 15,
            marginLeft: 15
        },

        loginLogoStyle: {
            width: 100,
            height: 126,
            alignSelf: 'center',
            marginTop: 70,
            marginBottom: 35
        },

        loginTextStyle: {
            fontSize:14,
            flex: 1,
            height: 40,
            marginLeft: 15,
            borderColor: 'gray'
        },

        textContainerStyle: {
            flexDirection: 'row',
            alignItems: 'center',
            marginLeft: 35,
            marginRight: 35,
            marginTop: 15,
            borderWidth: 0.5,
            borderColor: 'transparent',
            borderBottomColor: '#cccccc'
        }
    }
)